<template>
  <div class="contain">
    <div class="header">
      <div class="back" @click="prev">
        <img src="../assets/arrow-left.png" alt="">
      </div>
      
      <div class="inputContain">
        <div class="picture">
          <img src="../assets/search-light.png" alt="">
        </div>
        <input type="text" v-model="keywords" @keyup.enter="search()">
      </div>
      <p @click="search">搜索</p>
    </div>

    <div class="historyRecord">
      <div class="hisText">
        <div class="title">历史记录</div>
        <div class="delLocalSto" @click="delAll">
          <img src="../assets/del.png" alt="">
        </div>
      </div>
      <div class="hisList">
        <a v-for="(item, index) in brief" :key="index" >{{item}}</a>
      </div>
    </div>


  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { onMounted, reactive, toRefs } from '@vue/runtime-core'



export default {
  
  setup() {
    const router = useRouter()
    const state = reactive({
      brief: [],
      keywords: ''
    })
    const  prev = () => {
      router.go(-1)
    }

    const search = () => {
      if(state.keywords !== '') {
        let val = state.keywords.trim()    //去除字符串的头尾空格
        if(!val) {    //判断输入框是否为空
          return
        }
        // 如果local里没有值，那就存储到里面
        if(state.brief.indexOf(val) === -1) {
          state.brief.unshift(val)   //最新的第一个历史记录
          state.brief = state.brief.slice(0, 10)    //最多显示10个
          // 历史记录搜索
          localStorage.setItem('history', JSON.stringify(state.brief))
        }
      }
    }

    const delAll = () => {
      window.localStorage.removeItem('history')
      window.location.reload()
    }

    onMounted(async () => {
    if(JSON.parse(localStorage.getItem("history"))) {
      state.brief = JSON.parse(localStorage.getItem("history"))  //先读取local里面的值
    }
    })
    
    return {
      prev,
      search,
      delAll,
      ...toRefs(state),
    }
  },




}




</script>

<style scoped>
.header{
  display: flex;
  padding: 10px 5px;
  justify-content: space-between;
  height: 30px;
}

.back{
  width: 30px;
  height: 30px;
  
}
.back img{
  width: 30px;
  height: 30px;
}
.inputContain{
  display: flex;
  width: 70%;
}
.picture{
  width: 15%;
  height: 100%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: rgb(243, 241, 241);

}
.picture img{
  height: 100%;
}
input{
  background: rgb(243, 241, 241);
  border: none;
  width: 85%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
p{
  height: 30px;
  line-height: 30px;
  margin-right: 10px;
  color: rgb(179, 179, 179);
  font-size: 13px;
  letter-spacing: 1px;
}

.historyRecord{
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 0 10px;
}
.hisText{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.title{
  width: 30%;
  letter-spacing: 1px;
  font-size: 19px;
  font-weight: bolder;
}
.delLocalSto{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.delLocalSto img{
  width: 100%;
  height: 100%;
}

.hisList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
a{
  height: 28px;
  line-height: 28px;
  border-radius: 15px;
  padding: 0 12px;
  letter-spacing: 1px;
  margin-right: 25px;
  margin-bottom: 10px;
  background-color: rgb(245, 243, 243);
  color: rgb(123, 123, 124);
  font-size: 15px;
  font-family: SimHei;
}
</style>